<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
</head>
<!-- 
    Vue对于数组的监测
        首先Vue对于数组没有使用getter和setter所以你直接操作改变数组某一项时候，不会有响应，Vue根本监测不到
        1.数组变化Vue如何监测呢？
            只有改变原数组的那7个方法或者直接给此属性重新赋值新的数组（这就不是数组了，而是启动了对象属性的setter）才能使得Vue监测到
               ES5:  pop shift unshift push reverse splice sort    

        注意：但是Vue中数组中的这几个自身的方法已经不是原来的方法了，而是通过Vue包装过的方法了
            直接可以Vm._data.student.hobby.push==Array.prototype.push =====>false

            Vue对数组的监测实际就是包装数组常用的修改数组的方法来实现的
                包装分两步
                    1.实现数组原来方法
                    2.调用方法去重新解析模板


        难道只有这种方法吗？
            NO
            之前不是讲过
            Vue.set(Vm._data.student.hobby,1,'打台球')   Vm._data太麻烦，本身有数据代理，直接就是Vm.student.hobby
            Vm.$set(Vm._data.student.hobby,1,'打台球')
 -->

<body>
    <div id="root">
        <h2>爱好</h2>
        <button @click="addHobby">添加一个爱好</button>
        <button @click="updateHobby">修改第一个爱好为学习</button>
        <ul>
            <li v-for="(item,index) in student.hobby" :key="index">{{item}}</li>
        </ul>
    </div>
    <script>
        const Vm = new Vue({
            el: "#root",
            data: {
                student: {
                    hobby: ['抽烟', '喝酒', '烫头']
                }
            },
            methods: {
                addHobby() {
                    // this.student.hobby[3] = "学习"   //Vue监测无效，对于数组Vue只检测其使用9个改变原数组的所携带的方法，比如push unshif等等
                    this.student.hobby.push("学习")
                    console.log(this.student)

                },
                updateHobby() {
                    // this.student.hobby[0] = "学习" //Vue监测无效
                    this.student.hobby.splice(0, 1, "学习")
                },
            }
        })
    </script>

</body>

</html>